<template>
  <div class="m-header flex">
    <div class="w-40 h-40 border-1 p-1 mr-4">
      <img style="width: 100%;height: 100%;" :src="store.listPlaylistDetails.coverImgUrl" alt="">
    </div>
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <h3>{{store.listPlaylistDetails.name}}</h3>
        <p class="flex items-center yu-textColor-hover" @click="editPlaylist(store.listPlaylistDetails.id)" v-if="store.listPlaylistDetails?.creator?.userId === store.userInfo?.userId">
          <span class="i-mdi-file-edit-outline inline-block "></span>
          <span class="mr-2 ml-1">编辑</span>
        </p>
      </div>
      <div class="flex items-center mb-2">
        <div class="w-10 h-10 cursor-pointer">
          <img style="width: 100%;height: 100%;" :src="store.listPlaylistDetails?.creator?.avatarUrl" alt="">
        </div>
        <span class="mr-2 ml-2 yu-textColor-hover">{{ store.listPlaylistDetails?.creator?.nickname }}</span>
        <span class="yu-titleColor text-xs">{{ timestampToYMD(store.listPlaylistDetails.createTime) }} 创建</span>
      </div>
      <header-actions
          :actionsData="store.listPlaylistDetails"
          :isCollect="false"
          :isAddMusicList="false"
      />
      <div class="flex items-center mt-2"  v-if="store.listPlaylistDetails?.tags?.length > 0">
        <span class="mr-2 text-sm">标签：</span>
        <ul>
          <li v-for="(tag, index) in store.listPlaylistDetails.tags" :key="index" class=" text-xs border-1 yu-bgColor-tew-only pr-1 pl-1">{{ tag }}</li>
        </ul>
      </div>
      <p class="text-sm" v-if="store.listPlaylistDetails.description">
        <span class="mr-2 ">介绍：</span>
        <span>{{ store.listPlaylistDetails.description }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import { timestampToYMD } from "@/utils/index";
import HeaderActions from '@/components/HeaderActions/index.vue'
import {useRouter} from "vue-router";


const store = useStore()
const router = useRouter()
// 设置播放类型
store.currentInfo.type = 1

// 跳转到编辑歌单信息页面
const editPlaylist = (id) => {
  router.push({
    path: 'edit',
    query: {
      id
    }
  })
}

</script>

<style scoped>

</style>
